<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from 'vue';
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import {createKey, getObj, uploadObj} from "@/utils/obs";
import MyButton from "@/components/common/myButton.vue";
import {UploadUserFile} from 'element-plus'

const fileList = ref<UploadUserFile[]>([]);
const emits = defineEmits(['sentKey']);
const dialogVisible = ref(false)
const cropper = ref();
const imgSrc = ref();
const option = ref({
  img: '', // 裁剪图片的地址
  info: true, // 裁剪框的大小信息
  outputSize: 1, // 裁剪生成图片的质量
  outputType: 'jpeg', // 裁剪生成图片的格式
  canScale: true, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  // autoCropWidth: props.imgWidth, // 默认生成截图框宽度
  // autoCropHeight: props.imgHeight, // 默认生成截图框高度
  fixedBox: false, // 固定截图框大小 不允许改变
  fixed: false, // 是否开启截图框宽高固定比例
  // fixedNumber: [1, 1], // 截图框的宽高比例
  full: true, // 是否输出原图比例的截图
  canMove: true, // 是否可以拖动图片
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
})
// 上传按钮   限制图片大小
const changeUpload = (file) => {
  nextTick(() => {
    for (let i = 0; i < fileList.value.length; i++) {
      if (fileList.value[i].status != 'success') {
        fileList.value.splice(i, 1);
      }
    }
    let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
    const isJPG = testmsg === 'jpg'
    const isPNG = testmsg === 'png'
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isJPG && !isPNG) {
      ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!');
      return
    }
    let reader = new FileReader();
    nextTick(() => {
      option.value.img = file.url
      console.log(file.url)
      dialogVisible.value = true
    })
  })
}
// 点击裁剪，这一步是可以拿到处理后的地址
const finish = () => {
  cropper.value.getCropBlob((data) => {
    console.log(data)
    const key = createKey();
    uploadObj(data, key);
    let isNewSrc = ref(false);
    //   TODO: 图片回显
    //   这样做显然不对但是能跑。。。
    setTimeout(() => {
      getObj(key, imgSrc);
      const newObj : UploadUserFile = {
        name: '1',
        status: 'success',
        uid: 0,
        url: imgSrc.value,
      }
      fileList.value.push(newObj);
      emits('sentKey', key);
      dialogVisible.value = false;
    },300);
    //   dialogVisible.value = false;
    //   let timer = setInterval(() => {
    //     console.log(timer);
    //     getObj(key, imgSrc, isNewSrc);
    //     if (isNewSrc.value) {
    //       dialogVisible.value = false;
    //       isNewSrc.value = false;
    //       clearInterval(timer);
    //     }
    //   },10);

    // let timer = setInterval(() => {
    //   console.log('~');
    //   getObj(key, imgSrc, isNewSrc);
    //   if (isNewSrc.value) {
    //     dialogVisible.value = false;
    //     isNewSrc.value = false;
    //     clearInterval(timer);
    //   }
    // },100);
  })
}
</script>

<template>
  <el-upload
      v-model:file-list="fileList"
      id="upload" ref="pic" list-type="picture-card" action="" :auto-upload="false" :on-change="changeUpload"
  >
    <el-button type="primary">
      <el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </el-upload>
  <el-dialog title="图片剪裁" v-model="dialogVisible" append-to-body>
    <div class="cropper-content">
      <div class="cropper" style="text-align:center">
        <vueCropper ref="cropper" :img="option.img" :outputType="option.outputType"
                    :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
                    :original="option.original" :autoCrop="option.autoCrop" :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber" :centerBox="option.centerBox" :infoTrue="option.infoTrue"
                    :fixedBox="option.fixedBox"></vueCropper>
      </div>
    </div>
    <div class="dialog-footer">
      <span class="btn-group">
        <my-button type="primary" :width="100" :height="35" @click="finish">确认</my-button>
        <my-button type="light" :width="100" :height="35" @click="dialogVisible = false">取消</my-button>
      </span>
    </div>
  </el-dialog>
</template>

<style scoped>
.cropper {
  width: auto;
  height: 300px;
}
.dialog-footer{
  display: flex;
  width: 100%;
  padding-top: 30px;
  justify-content: center;
  .btn-group {
    display: flex;
    width: 240px;
    justify-content: space-between;
    /*&:deep(.el-button){*/
    /*  background-color: var(--color-light);*/
    /*  border: 1px solid var(--color-plain);*/
    /*  &.el-button--primary {*/
    /*    background-color: var(--color-primary);*/
    /*    border: none;*/
    /*  }*/
    /*  &:hover {*/
    /*    background-color: var(--color-plain);*/
    /*    color: var(--color-primary);*/
    /*    outline: none;*/
    /*  }*/
    /*}*/
  }
}
</style>